﻿@model List<ASPNETMVC4Tutorial.Models.Album>






<header>
    <div class="content-wrapper">
        <div class="float-left">
        </div>
    </div>

    <link href="../../Content/Site.css" rel="stylesheet" />
    <script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript">
    </script>

            <script type="text/javascript">
                $(document).ready(function () {
                    // Send an AJAX request
                    $.getJSON("api/ApiProducts/",
                    function (data) {
                        // On success, 'data' contains a list of products.
                        $.each(data, function (key, val) {

                            // Format the text to display.
                            var str = val.Name + ': $' + val.Price;

                            // Add a list item for the product.
                            $('<li/>', { text: str })
                            .appendTo($('#products'));
                        });
                    });
                });

                //debugging in the cshtml
                //debugger;
                $(function () {
                    window.setInterval(function () {
                        //ajax request
                        //$.ajaxSetup({cach: false});//通过jQuery的Ajax设置解决ajax缓存问题, seems does not work on IE10
                        $.ajax({
                            url: '@Url.Action("GetCurrentUtcTime")', //ajax缓存问题,在IE 和chrome显示不同
                            @*url: '@Url.Action("GetCurrentUtcTime")?' + new Date().toTimeString(), //通过为URL地址添加后缀的方式解决ajax缓存问题*@
                            success: function (result) {
                                $("ul").append("<li>"+ result+"</li>");
                                }
                            });
                    }, 60000);
                });

                function SearchById() {
                    var id = $('#prodId').val();
                    $.get("api/apiProducts/GetProductById?id=" + id,
                        function (data) {
                            console.log("ok");
                            var str = data.Name + ': $' + data.Price;
                            $('#product').text(str);
                        })
                    .fail(
                    
                        function (jqXHR, textStatus, err) {

                            $('#product').text('Error: ' + err);
                        });
                }
        </script>


</header>
<div id="body">
        <div class="main-content">
        <div>
            <h1>All Products</h1>
            <ul id="products"></ul>
        </div>
        <div>
            <label for="prodId">ID:</label>
            <input type="text" id="prodId" size="5"/>
            <input type="button" value="Search" onclick="SearchById();" />
            <p id="product"></p>
        </div>

    <ul id="album-list">
    @foreach (var album in Model)
    {
        <li><a href="@Url.Action("Details", "Store",
                new { id = album.AlbumId })">

            <img alt="@album.Title" src="@album.AlbumArtUrl" />
            <span>@album.Title</span> </a>
        </li>
    }
    </ul>

    </div>


</div>
